<template>
  <view class="home main-box">

    <view class="home-head">
      <comListItem
          @tap="jump('/pagesSetting/mine/storeManage', true)"
          comTitle="门店名称"
          :isArrow="true"
          :comTitleStyle="configCss.titleStyle"
          :comListStyle="configCss.listStyle"
      >
        <template #header>
          <view class="home-head-logo main-bg"
                :style="{'background-image': 'url('+ ossImage('login/logo.png')+')'}"
          ></view>
        </template>
      </comListItem>
    </view>

    <view class="home-person">
      <comListItem
          @tap="jump('/pagesSetting/mine/personManage', true)"
          comTitle="门店员工"
          :isArrow="true"
          :comTitleStyle="configCss.titleStylePerson"
          :comListStyle="configCss.listStylePerson"
      >
      </comListItem>


      <view v-for="(item,index) in renderData.list" class="script-item script-item-small">

        <view @click="handleJump(item)" class="script-item-box fx-row-b">
          <view class="script-item-box-img main-bg"
                :style="{'background-image': 'url('+ item.script?.cover +')'}"
          >
          </view>

          <view class="script-item-box-content fx-col-b">
            <view class="script-item-box-content-title fx-row-s">
              <view class="title-name com-overflow">{{ item.script?.title }}</view>
              <view class="title-count">管理员</view>
            </view>
            <view class="script-item-box-content-author fx-row-b">
              <view class="fx-row-s" style="align-items: end;">
                <view class="script-item-box-content-author-text ml15"> 账号：1900002342423423424234234242342342423423423</view>
              </view>
            </view>
          </view>

          <view class="script-item-box-op">
            <button class="icon-btn-e icon-btn-s2">更换</button>
          </view>
        </view>

      </view>

    </view>

    <view class="home-script">
      <comListItem
          @tap="jump('/pagesSetting/mine/numberAlready', true)"
          comTitle="剧本列表"
          :isArrow="false"
          :comTitleStyle="configCss.titleStyleScript"
          :comListStyle="configCss.listStyleScript"
      >
      </comListItem>

      <view class="home-script-code fx-row-b">
        <input placeholder="请输入激活码" type="text" />
        <button class="home-script-code-btn icon-btn-b">激活</button>
      </view>

      <view class="script-item-box fx-row-b">
        <view class="script-item-box-img main-bg" :style="{'background-image': 'url('+ renderData.detail.cover +')'}"></view>
        <view class="script-item-box-content fx-col-b">
          <view class="script-item-box-content-title fx-row-b">
            <text class="title-name com-overflow">{{ renderData.detail?.title }}</text>

            <view class="title-op">
              <uv-icon  size="40" name="more-dot-fill"></uv-icon>
            </view>
          </view>

          <view class="script-item-box-content-tag com-overflow fx-row-s">
            <uv-tag v-if="renderData.detail?.type"
                    class="script-item-box-content-tag-list" clear mode="dark"  size="mini" shape="circle"
                    :text="renderData.detail?.type"  :color="color.colorTextD" :bg-color="configCss.iconStyle.tagColor"/>
            <uv-tag v-for="(item,index) in renderData.detail?.age"
                    class="script-item-box-content-tag-list" clear mode="dark"  size="mini" shape="circle"
                    :text="item"  :color="color.colorTextD" :bg-color="configCss.iconStyle.tagColor"/>
            <uv-tag v-if="renderData.detail?.ageRating"
                    class="script-item-box-content-tag-list" clear mode="dark"  size="mini" shape="circle"
                    :text="renderData.detail?.ageRating"  :color="color.colorTextD" :bg-color="configCss.iconStyle.tagColor"/>
            <uv-tag v-for="(item,index) in renderData.detail?.tags"
                    v-show="index > 2 ? false:true"
                    class="script-item-box-content-tag-list" clear mode="dark"  size="mini" shape="circle"
                    :text="item" :color="color.colorTextD" :bg-color="configCss.iconStyle.tagColor"  />
          </view>

          <view @click="jump('/pagesSetting/mine/userInfo?userId='+ renderData.detail.user?.id)" class="script-item-box-content-author fx-row-s">
            <uv-image
                :width = "width"
                :height = "height"
                shape="circle"
                src="https://tcs.teambition.net/thumbnail/112x551aad230e75f65a0ac07ea44a2ca1ef/w/200/h/200"
            ></uv-image>
            <text class="ml15"> 作者：{{ renderData.detail.user?.nickname }}</text>
          </view>

          <view class="script-item-box-content-op fx-row-b">
            <view class="script-item-box-content-op-time">玖庸工作室</view>
            <view class="script-item-box-content-op-btn">
              已测：{{12}}场
            </view>
          </view>
        </view>
      </view>
    </view>


    <view class="script-popup">
      <uv-popup :mask="true" v-model="renderData.comScriptDisplay" border-radius="20" mode="bottom" height="auto">
        <comScript title="收藏夹" id="12"></comScript>
      </uv-popup>
    </view>

  </view>
</template>

<script setup>
import { reactive, ref,computed} from "vue";
import { ossImage,jump,timeFormat,isGender } from '@/utils/index'
import comListItem from "@/components/com-list/index-list";
import comScript from '@/pagesSetting/mine/comScript'
import { header,color,mine,play } from '@/enums/constants';
const {width , height} = {...header.little};

const renderData = {
  comScriptDisplay:true,
  list:[
    {
      script:{
        cover:'https://tcs.teambition.net/thumbnail/112x551aad230e75f65a0ac07ea44a2ca1ef/w/200/h/200',
        title:'你好',
        user:{nickname:'www'}
      }
    }
  ],
  detail:{}
}



//页面列表配置
const configCss = {
  listStyle: {
    padding: "30rpx 0rpx",
    backgroundColor: "transparent",
  },
  titleStyle: {fontSize:'34rpx',fontWeight:600},
  //门店员工
  titleStylePerson:{fontWeight:600},
  listStylePerson:{
    padding:"0",
    backgroundColor: "transparent",
    marginBottom:"20rpx"
  },
  //门店剧本
  listStyleScript:{padding:'0 20rpx'},
  titleStyleScript:{fontWeight:600},

  detailStyle:{
    fontSize:'30rpx',
    padding:'5rpx 0',
    color:'#fff'
  },
  iconStyle:{
    color:color.colorA,
    tagColor:'rgba(94, 94, 94, 0.2)'
  },
};


</script>

<style lang="scss" scoped>
.home{
   &-head{
     padding-right:20rpx;
     &-logo{
       width: 80rpx;
       height: 80rpx;
       margin-right:30rpx;
     }
   }

  &-person{
    padding:20rpx;
    background-color: $main-text-e;
    border-radius: 10rpx;
    .script-item-box{
      &-img{
        width: 80rpx;
        height: 80rpx;
      }
      &-op{
        .icon-btn-e{
          background-color: transparent !important;
        }
        .icon-btn-e:after{border:1px solid $main-text-b;}
      }
    }
  }
  &-script{
    @include main-line4;
    &-code{
      @include main-line2;
      margin-bottom: 30rpx;
      input{
        padding:10rpx 15rpx;
        flex-grow: 1;
        background-color: $main-text-e;
        height: 44rpx;
        border-radius: 10rpx;
      }
      &-btn{
        width: 160rpx;
        padding: 0 25rpx;
        vertical-align: center;
        margin-left: 30rpx;
        margin-right: 0;
        @include main-text3;
        border-radius: 10rpx;
      }
    }

    .script-item-box{
      @include main-line2;
      border-radius: 10rpx;
      padding:20rpx;
      background-color: $main-text-e;
      &-img{
        width: 160rpx;
      }

      .script-item-box-content-op-btn{@include main-text4}
    }
  }

}
</style>
